<template>
  <vxe-grid ref='Right' v-bind="gridOptions" v-on="gridEvents">
<!--    <template #hiddenFields="{ row }">-->
<!--      <vxe-select v-model="row.hiddenFieldID" transfer clearable multiple >-->
<!--        <vxe-optgroup v-for="items in fields"  :label="items.tableDispName">-->
<!--        <vxe-option v-for="item in items.Fields" :key="item.fieldID" :value="item.fieldID" :label="item.fieldDispName">{{}}</vxe-option>-->
<!--        </vxe-optgroup>-->
<!--      </vxe-select>-->
<!--    </template>-->
<!--    <template #onlyReadFields="{ row }">-->
<!--      <vxe-select v-model="row.onlyReadFieldID" transfer clearable multiple>-->
<!--        <vxe-optgroup v-for="items in fields"  :label="items.tableDispName">-->
<!--        <vxe-option v-for="item in items.Fields" :key="item.fieldID" :value="item.fieldID" :label="item.fieldDispName"></vxe-option>-->
<!--        </vxe-optgroup>-->
<!--      </vxe-select>-->
<!--    </template>-->
<!--    <template #Roles="{ row }">-->
<!--      <vxe-select v-model="row.roleID" transfer>-->
<!--        <vxe-option v-for="item in roles" :key="item.value" :value="item.value" :label="item.label"></vxe-option>-->
<!--      </vxe-select>-->
<!--    </template>-->

  </vxe-grid>
</template>

<script>
import {onMounted, reactive, ref} from 'vue'
import XEUtils from 'xe-utils'
import {deleteRight, editRight, getRightList, getRole, GetTable,resetRight} from "/@/api/linkoo/templates";
import {useRoute} from "vue-router";
import {ElMessage} from 'element-plus'
export default {
  name: "readRight",
  setup() {
    const route = useRoute()
    const Right = ref()
    const gridOptions = reactive({
      border: true,
      showHeaderOverflow: true,
      showOverflow: true,
      keepSource: true,
      id: 'right',
      height: 600,
      rowConfig: {
        isHover: true
      },
      columnConfig: {
        resizable: true
      },
      pagerConfig: {
        pageSize: 20,
        pageSizes: [20, 40, 100]
      },
      toolbarConfig: {
        buttons: [
          {code: 'insert_actived', name: '新增'},
          {code: 'delete', name: '直接删除'},
          {code: 'save', name: '保存', status: 'success'},
          {code: 'reset', name: '重置'}
        ]
      },
      proxyConfig: {
        props: {
          result: 'result', // 配置响应结果列表字段
          total: 'page.total' // 配置响应结果总页数字段
        },
        // 只接收Promise，具体实现自由发挥
        ajax: {
          // 当点击工具栏查询按钮或者手动提交指令 query或reload 时会被触发
          query: ({page, sorts, filters, form}) => {
            return new Promise(resolve => {
              page = XEUtils.assign(page, form)
              getRightList(route.params.id, page).then((res) => {
                resolve({
                  result:res.data.list?res.data.list.map(row => {
                    row.onlyReadFieldID=JSON.parse(row.onlyReadFieldID!==''?row.onlyReadFieldID:'[]')
                    row.hiddenFieldID=JSON.parse(row.hiddenFieldID!==''?row.hiddenFieldID:'[]')
                        return row
                      }
                  ):[],
                  page: {
                    total: res.data.total
                  }
                })
              });
            })
          },
          save: ({body}) => {
            return new Promise(resolve => {
              editRight(route.params.id, body.updateRecords.concat(body.insertRecords.map(row=>{row.RightID=0;return row}))).then(response => {
                resolve({})
              })
            })
          },
          delete: ({body}) => {
            return new Promise(resolve => {
              deleteRight({data: body.removeRecords}).then(response => {
                resolve({})
              })
            })
          },
        }
      },
      columns: [
        {type: 'checkbox', width: 44},
        {field: 'RightID', title: 'ID', visible: false},
        {field: 'roleID',width: 150, title: '角色', editRender: {name: '$select',options:[], attrs: {placeholder: '请选择角色'}}},
        {field: 'readType', title: '授权范围', width: 140, editRender: {name: '$select', options:[{label:'无权限',value:8},{label:'全部',value:1},{label:'本部门及以下',value:2},{label:'本部门',value:3},
              {label:'本人',value:6},{label:'本人及下级',value:5},{label:'本人及上级',value:4}],props: {clearable:true,placeholder: '请选择范围'}}},
        {field: 'canCreate',width: 80, title: '创建', editRender: {name: '$select',options:[{label:'无权',value:0},{label:'有权',value:1}],props:{clearable:true},  attrs: {placeholder: '请选择'}}},
          {field: 'canReview',width: 80, title: '修改', editRender: {name: '$select',options:[{label:'无权',value:0},{label:'有权',value:1}],props:{clearable:true},  attrs: {placeholder: '请选择'}}},
          {field: 'canCheck',width: 80, title: '审核', editRender: {name: '$select',options:[{label:'无权',value:0},{label:'有权',value:1}],props:{clearable:true},  attrs: {placeholder: '请选择'}}},
        {field: 'canPrint',width: 80, title: '打印', editRender: {name: '$select',options:[{label:'无权',value:0},{label:'有权',value:1}],props:{clearable:true},  attrs: {placeholder: '请选择'}}},
        {field: 'canUnCheck', width: 80,title: '删除', editRender: {name: '$select',options:[{label:'无权',value:0},{label:'有权',value:1}],props:{clearable:true},  attrs: {placeholder: '请选择'}}},
        {field: 'hiddenFieldID',width: 240, title: '隐藏字段', editRender: {name: '$select',optionGroups:[],props:{clearable:true,multiple:true},  attrs: {placeholder: '请选择字段'}}},
        {field: 'onlyReadFieldID',width: 240,title: '只读字段', editRender: {name: '$select',optionGroups:[],props:{clearable:true,multiple:true}, attrs: {placeholder: '请选择字段'}}},
        {field: 'specViewRightFilter', title: '取数条件', editRender: {name: '$input'}},
      ],
      editConfig: {
        trigger: 'click',
        mode: 'cell',
        showStatus: true
      }
    })
    onMounted(() => {
      GetTable(route.params.id).then(res => {
        const fields=[]
        XEUtils.objectEach(res.data,row=>{
          const ff=[]
          XEUtils.arrayEach(row.Fields,f=>{
            ff.push({label:f.fieldDispName,value:f.fieldID})
          })
          fields.push({options:ff,label:row.tableDispName})
        })


        const {columns} = gridOptions
        if (columns) {
          columns.forEach(item=>{
            if(['hiddenFieldID','onlyReadFieldID'].includes(item.field)){
              item.editRender.optionGroups = fields
            }
          })
        }
      })
      getRole(route.params.id).then(res => {
       const roles=[]
        XEUtils.arrayEach(res.data.list,row=>{
          roles.push({label:row.name,value:row.id})
        })
        const {columns} = gridOptions
        if (columns) {
          columns[2].editRender.options = roles
        }
      })

    })
    const gridEvents= {
      toolbarButtonClick ({ code }) {
        const $grid = Right.value
        switch (code) {
          case 'reset': {
            const ids=[]
            $grid.getCheckboxRecords().forEach(row=>{
              ids.push(row.roleID)
            })
            if(ids.length){
              resetRight(route.params.id,{ruleids:ids}).then(res=>{
                ElMessage.success("操作成功")
              })
            }

            break
          }
        }
      }
    }
const reset=(id)=>{
  console.log(id)

}
    return {
      gridOptions,Right,gridEvents
    }
  }

}
</script>

<style scoped>

</style>